<template>
	<view class="pageBox">
		<view class="swiperBox2">
			<swiper class="swiper2" circular :autoplay="true" :interval="3000" :indicator-dots="true">
				<swiper-item v-for="item in banner" :key="item.id">
					<image class="swiper2Img" :src="item.src">
					</image>
				</swiper-item>
			</swiper>
		</view>

		<!-- <view class="topTabs2 flex-between">
			<scroll-view :scroll-x="true" style="width: 640rpx;">
				<view class="topTabsLeft2 flex-row">
					<view class="topTab2 flex-center" v-for="item in topTabs2" :key="item.id" @click="onTopTab2(item)">
						<view class="topTabText3">
							{{ item.title }}
						</view>
						<image class="tabLine2" src="http://www.bobei.shop/static/third/tabLine.png" mode=""
							v-if="item.status">
						</image>
					</view>
				</view>
			</scroll-view>
		</view> -->

		<view class="waterfallBox">
			<view class="waterfall flex">
				<view class="wt-list wt-left flex">
					<view class="wt-item flex" v-for="item in LeftList" :key="item.id" @click="goGoodsDetails(item)">
						<image class="thumb" mode="widthFix" :src="item.thumbUrl"></image>
						<!-- 特卖标签 -->
						<view class="specialSale flex-center" v-if="item.isdiscount == 1">
							<image class="specialSaleImg" src="http://www.bobei.shop/static/third/teMaiIcon.png"
								mode=""></image>
						</view>

						<!-- 秒杀倒计时 -->
						<view class="countdownBox flex-center" v-if="item.isSpike == 1 && item.isdiscount != 1">
							<view class="countdownTitle">
								秒杀:
							</view>
							<uni-countdown :showDay="false" :hour="item.time_h" :minute="item.time_m"
								:second="item.time_s" color="#ffffff" splitorColor="#ffffff">
							</uni-countdown>
						</view>
						<!-- 商品信息 -->
						<view
							:class="[item.genre == 0 ? 'wt-item-info wt-item-info-bg-yellow' : 'wt-item-info wt-item-info-bg-white']">
							<!-- 标签 -->
							<!-- <scroll-view class="info-sign-scroll" :scroll-x="true" v-if="item.labelname && item.labelname.length && item.isSpike == 1">
								<view class="info-sign flex">
									<view class="info-sign-item flex-center" v-for="(item2,index2) in item.labelname" :key="index2">
										<view class="info-sign-item-title">
											{{ item2.label }}
										</view>
										<view class="info-sign-item-line"></view>
									</view>
								</view>
							</scroll-view> -->
							<!-- VIP标志 -->
							<view class="vipBox flex-center" v-if="item.genre == 0">
								<view class="vipTitle">
									推荐
								</view>
								<view class="vipLine"></view>
							</view>
							<view class="goodsBox">
								<view class="title threeHidden">
									{{ item.title }}
								</view>
								<!-- 商品标签 -->
								<scroll-view class="goodsSignScroll" :scroll-x="true"
									v-if="item.labelname && item.labelname.length && item.genre == 0">
									<view class="goodsSign flex-row">
										<view class="goodsSignItem flex-row" v-for="(item2,index2) in item.labelname"
											:key="index2">
											<view class="goodsSignItemTitle">
												{{ item2.label }}
											</view>
											<view class="goodsSignItemLine"></view>
										</view>
									</view>
								</scroll-view>
								<!-- 商品标签 -->
								<scroll-view class="goodsSignScroll" :scroll-x="true"
									v-if="item.labelname && item.labelname.length && item.hot == 1">
									<view class="goodsSign flex-row">
										<view class="goodsSignItem2" v-for="(item2,index2) in item.labelname"
											:key="index2">
											{{ item2.label }}
										</view>
									</view>
								</scroll-view>
								<!-- 价格 -->
								<view class="goodsPriceBox flex-between">
									<view class="goodsPrice">
										<view class="market">
											¥{{ item.marketprice }}
										</view>
										<view class="del">
											<view class="deltext">
												¥{{ item.productprice }}
											</view>
											<view class="delLine"></view>
										</view>
									</view>
									<image class="goodsCart" src="http://www.bobei.shop/static/third/goodsCart.png">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="wt-list wt-right flex">
					<view class="wt-item flex" v-for="item in RightList" :key="item.id" @click="goGoodsDetails(item)">
						<image class="thumb" mode="widthFix" :src="item.thumbUrl"></image>
						<view class="specialSale flex-center" v-if="item.isdiscount == 1">
							<image class="specialSaleImg" src="http://www.bobei.shop/static/third/teMaiIcon.png"
								mode=""></image>
						</view>

						<view class="countdownBox flex-center" v-if="item.isSpike == 1 && item.isdiscount != 1">
							<view class="countdownTitle">
								秒杀:
							</view>
							<uni-countdown :showDay="false" :hour="item.time_h" :minute="item.time_m"
								:second="item.time_s" color="#ffffff" splitorColor="#ffffff">
							</uni-countdown>
						</view>
						<view
							:class="[item.genre == 0 ? 'wt-item-info wt-item-info-bg-yellow' : 'wt-item-info wt-item-info-bg-white']">
							<!-- 标签 -->
							<!-- <scroll-view class="info-sign-scroll" :scroll-x="true" v-if="item.labelname && item.labelname.length && item.isSpike == 1">
								<view class="info-sign flex">
									<view class="info-sign-item flex-center" v-for="(item2,index2) in item.labelname" :key="index2">
										<view class="info-sign-item-title">
											{{ item2.label }}
										</view>
										<view class="info-sign-item-line"></view>
									</view>
								</view>
							</scroll-view> -->
							<!-- VIP标志 -->
							<view class="vipBox flex-center" v-if="item.genre == 0">
								<view class="vipTitle">
									推荐
								</view>
								<view class="vipLine"></view>
							</view>
							<view class="goodsBox">
								<view class="title threeHidden">
									{{ item.title }}
								</view>
								<!-- 商品标签 -->
								<scroll-view class="goodsSignScroll" :scroll-x="true"
									v-if="item.labelname && item.labelname.length && item.genre == 0">
									<view class="goodsSign flex-row">
										<view class="goodsSignItem flex-row" v-for="(item2,index2) in item.labelname"
											:key="index2">
											<view class="goodsSignItemTitle">
												{{ item2.label }}
											</view>
											<view class="goodsSignItemLine"></view>
										</view>
									</view>
								</scroll-view>
								<!-- 商品标签 -->
								<scroll-view class="goodsSignScroll" :scroll-x="true"
									v-if="item.labelname && item.labelname.length && item.hot == 1">
									<view class="goodsSign flex-row">
										<view class="goodsSignItem2" v-for="(item2,index2) in item.labelname"
											:key="index2">
											{{ item2.label }}
										</view>
									</view>
								</scroll-view>
								<!-- 价格 -->
								<view class="goodsPriceBox flex-between">
									<view class="goodsPrice">
										<view class="market">
											¥{{ item.marketprice }}
										</view>
										<view class="del">
											<view class="deltext">
												¥{{ item.productprice }}
											</view>
											<view class="delLine"></view>
										</view>
									</view>
									<image class="goodsCart" src="http://www.bobei.shop/static/third/goodsCart.png">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="listStatus"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],

				topTabsId2: "0",
				topTabs2: [{
						id: "0",
						title: "综合",
						status: true,
					},
					{
						id: "1",
						title: "销量",
						status: false,
					},
					{
						id: "2",
						title: "价格",
						status: false,
					},
				],

				goodList: [],
				LeftList: [],
				RightList: [],
				loading: false,
				finished: false,
				form: {
					lastId: 0,
					page: 1,
					type: "",
					cateId: "",
					genre: "",
					sort: "salesDesc",
					shopId: "",
					parentId: "",
					keyword: "",
				},
				interface: 2000,
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.navTitle ? e.navTitle : "商品列表",
			})
		},
		onShow() {
			this.getBanner();
			this.form.page = 1;
			this.form.lastId = 0;
			this.loading = false;
			this.finished = false;
			this.goodList = [];
			this.getGoodList();
		},
		onReachBottom() {
			this.getGoodList();
		},
		computed: {
			listStatus() {
				if (this.finished) return "noMore";
				if (this.loading) return "loading";
				return "more";
			},
		},
		methods: {
			goGoodsDetails(param) {
				if (param.isSpike == 1 && param.isdiscount != 1) {
					this.goGoodsDetails2(param, "seckill");
				} else {
					uni.navigateTo({
						url: "/home/goodsDetails?id=" + param.id,
					})
				}

			},
			goGoodsDetails2(param, seckill) {
				uni.navigateTo({
					url: `/home/spikeDetails?id=${param.isSpikeInfo.id}&seckill=${seckill}`
				})
			},
			getGoodList() {
				if (this.loading || this.finished) return;
				this.loading = true;
				// if(this.topTabsId2 == "0") {
				// 	if(this.form.sort == "scoreDesc") {
				// 		this.form.sort = "scoreAsc";
				// 	} else if(this.form.sort == "scoreAsc") {
				// 		this.form.sort = "scoreDesc";
				// 	} else {
				// 		this.form.sort = "scoreDesc";
				// 	}
				// } else if(this.topTabsId2 == "1") {
				// 	if(this.form.sort == "salesDesc") {
				// 		this.form.sort = "salesAsc";
				// 	} else if(this.form.sort == "salesAsc") {
				// 		this.form.sort = "salesDesc";
				// 	} else {
				// 		this.form.sort = "salesDesc";
				// 	}
				// } else if(this.topTabsId2 == "2") {
				// 	if(this.form.sort == "priceDesc") {
				// 		this.form.sort = "priceAsc";
				// 	} else if(this.form.sort == "priceAsc") {
				// 		this.form.sort = "priceDesc";
				// 	} else {
				// 		this.form.sort = "priceDesc";
				// 	}
				// }
				this.$post({
					url: '/portal/Shop',
					module: 'Goods',
					interface: this.interface,
					data: this.form,
				}).then(res => {
					this.goodList = [...this.goodList, ...res.list];
					this.goodList.forEach((item) => {
						if (item.isSpike == 1) {
							let time = this.getHMS(item.isSpikeInfo.overTime);
							item.time_h = Number(time.h);
							item.time_m = Number(time.m);
							item.time_s = Number(time.s);
						}

					})
					this.LeftList = [];
					this.RightList = [];

					// 将商品信息列表分为左侧右侧两个部分
					for (let i = 0; i < this.goodList.length; i++) {
						if (i % 2 === 0) {
							this.LeftList.push(this.goodList[i]);
						} else {
							this.RightList.push(this.goodList[i]);
						}
					}
					// console.log("this.LeftList:", this.LeftList, "this.RightList:", this.RightList)
					this.form.page = res.currentPage + 1;
					this.form.lastId = res.lastId;
					if (this.form.page > res.lastPage) {
						this.finished = true;
					}
					this.loading = false;

				}).catch(() => {
					this.loading = false;
				})
			},
			getBanner() {
				this.$post({
					module: 'Content',
					interface: 1000,
					data: {
						position_id: 17,
					},
				}).then((res) => {
					this.banner = res.list;
				})
			},
			// 毫秒级时间戳转换时分秒
			getHMS(timestamp) {
				let date = timestamp * 1000;
				let now = new Date().getTime();
				let times = date - now;
				let seconds = Math.floor(times / 1000);
				let minutes = Math.floor(seconds / 60);
				let hours = Math.floor(minutes / 60);
				minutes %= 60;
				seconds %= 60;
				let h = hours;
				let m = minutes.toString().padStart(2, '0');
				let s = seconds.toString().padStart(2, '0');
				return {
					h,
					m,
					s
				}
			},
			onTopTab2(param) {
				this.topTabs2.forEach((item) => {
					item.status = false;
					if (item.id == param.id) {
						item.status = true;
						this.topTabsId2 = item.id;
						// console.log("this.topTabsId2:", this.topTabsId2);
						uni.setStorageSync('topTabsId2', this.topTabsId2);
						this.form.page = 1;
						this.form.lastId = 0;
						this.loading = false;
						this.finished = false;
						this.goodList = [];
						this.getGoodList();
					}
				})
			},
		},
	}
</script>
<style scoped lang="scss">
	.swiperBox2 {
		width: 100%;
		margin-bottom: 22rpx;

		.swiper2 {
			width: 100%;
			height: 358rpx;

			.swiper2Img {
				width: 100%;
				height: 358rpx;
			}

			/deep/.uni-swiper-dot {
				width: 6rpx;
				height: 6rpx;
				border-radius: 50%;
			}
		}
	}

	.topTabs2 {
		width: 100%;
		height: 68rpx;
		margin-top: 7rpx;
		padding: 0 30rpx;

		.topTabsLeft2 {
			width: 100%;
			height: 68rpx;
			overflow-x: auto;

			.topTab2 {
				flex-direction: column;
				margin-right: 80rpx;
				height: 68rpx;
				position: relative;

				.topTabText3 {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					white-space: nowrap;
				}

				.tabLine2 {
					width: 46rpx;
					height: 10rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%, 0);
				}
			}

			.topTab2:nth-last-of-type(1) {
				margin-right: 0;
			}
		}
	}

	.waterfallBox {
		margin: 24rpx auto 0;
		width: 692rpx;

		.waterfall {
			width: 100%;
			overflow: hidden;

			.wt-list {
				flex-direction: column;
				width: 332rpx;
				margin-right: 30rpx;


				.wt-item {
					margin-bottom: 16rpx;
					background-color: #ffffff;
					border-radius: 24rpx;
					position: relative;
					/* 裁切 圆角*/
					overflow: hidden;
					box-shadow: 0px 8rpx 8rpx 0px rgba(212, 212, 212, 0.25);
					flex-direction: column;

					.thumb {
						width: 100%;
					}

					.specialSale {
						width: 70rpx;
						height: 36rpx;
						background: linear-gradient(90deg, #F76F4C 0%, #F85954 100%);
						border-radius: 24rpx 0rpx 24rpx 0rpx;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;

						.specialSaleImg {
							width: 36rpx;
							height: 26rpx;
						}
					}


					.countdownBox {
						width: 200rpx;
						height: 36rpx;
						background: linear-gradient(90deg, #FD9522 0%, #F4665C 100%);
						border-radius: 24rpx 0px 24rpx 0px;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;

						.countdownTitle {
							font-size: 16rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							color: #FFFFFF;
							white-space: nowrap;
						}

						/deep/.uni-countdown__number {
							width: auto !important;
						}

						/deep/.uni-countdown {
							padding-bottom: 6rpx;
						}

						/deep/.uni-countdown__number span {
							font-size: 16rpx;
						}

						/deep/.uni-countdown__splitor span {
							font-size: 16rpx;
						}
					}

					.wt-item-info {
						width: 100%;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						padding: 22rpx 12rpx 20rpx;
						position: relative;

						.info-sign-scroll {
							width: 200rpx;
							position: absolute;
							top: -20rpx;
							left: 18rpx;
							z-index: 1;
						}

						.info-sign {
							width: 200rpx;
							height: 32rpx;
							background: linear-gradient(270deg, #F3645D 0%, #FC9520 100%);
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							overflow-x: auto;
							padding: 0 10rpx;

							.info-sign-item {
								.info-sign-item-title {
									font-size: 16rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #FFFFFF;
									white-space: nowrap;
								}

								.info-sign-item-line {
									width: 2rpx;
									height: 14rpx;
									background-color: #ffffff;
									margin: 0 6rpx;
								}
							}
						}

						.vipBox {
							flex-direction: column;
							width: 90rpx;
							height: 60rpx;
							background: #FEEAA0;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							position: absolute;
							z-index: 1;
							top: -40rpx;
							left: 30rpx;

							.vipTitle {
								font-size: 28rpx;
								font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
								font-weight: bold;
								color: #8F5F10;
								font-style: italic;
							}

							.vipLine {
								width: 52rpx;
								height: 6rpx;
								background: #8F5F10;
								border-radius: 18rpx 18rpx 18rpx 18rpx;
							}
						}

						.goodsBox {
							padding: 8rpx;
							background-color: #ffffff;
							border-radius: 24rpx;

							.title {
								font-size: 28rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: bold;
								color: #000000;
							}

							.goodsSignScroll {
								width: 300rpx;
							}

							.goodsSign {
								width: 300rpx;
								margin-top: 8rpx;

								.goodsSignItem {
									.goodsSignItemTitle {
										font-size: 20rpx;
										font-family: PingFang SC-Regular, PingFang SC;
										font-weight: normal;
										color: #A6A5A6;
										white-space: nowrap;
									}

									.goodsSignItemLine {
										width: 2rpx;
										height: 22rpx;
										background-color: #A6A5A6;
										margin: 0 16rpx;
									}
								}

								.goodsSignItem2 {
									font-size: 16rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: normal;
									color: #DA93A5;
									padding: 4rpx 6rpx;
									background: #FCEEF3;
									border-radius: 8rpx;
									border: 2rpx solid #F2615F;
									white-space: nowrap;
									margin-right: 12rpx;
								}
							}

							.goodsPriceBox {
								margin-top: 12rpx;

								.goodsPrice {
									.market {
										font-size: 28rpx;
										font-family: PingFang SC-Medium, PingFang SC;
										font-weight: 500;
										color: #E4883A;
									}

									.del {
										position: relative;

										.deltext {
											font-size: 20rpx;
											font-family: PingFang SC-Medium, PingFang SC;
											font-weight: normal;
											color: #CFCDCF;
										}

										.delLine {
											width: 100%;
											height: 2rpx;
											background-color: #CFCDCF;
											position: absolute;
											left: 0;
											top: 50%;
											transform: translate(0, -50%);
										}
									}
								}

								.goodsCart {
									width: 48rpx;
									height: 48rpx;
								}
							}
						}

					}

					.wt-item-info-bg-white {
						background: #ffffff;
					}

					.wt-item-info-bg-yellow {
						background: linear-gradient(180deg, #FEEAA1 0%, #FEE589 100%);
						margin-top: -16rpx;
					}
				}
			}

			.wt-list:nth-last-of-type(1) {
				margin-right: 0;
			}
		}
	}
</style>
